<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>服务列表</title>
    <link rel="stylesheet" th:href="@{/layui/css/layui.css}">
</head>
<body>

<table id="item" lay-filter="test"></table>

<script type="text/html" id="barDemo">
    <a class="layui-btn layui-btn-xs" lay-event="edit">编辑</a>
    <a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del">删除</a>
</script>

<script th:src="@{/layui/layui.js}"></script>

<script th:inline="none">
    layui.table.render({
        elem: '#item'
        ,url: '/item/itemList.do' //数据接口
        ,page: true //开启分页
        ,cols: [[ //表头
            {field: 'itemId', title: 'ID', width:80, sort: true}
            ,{field: 'itemName', title: '项目名称', width:120, sort: true}
            ,{field: 'itemPrice', title: '项目价格', width:120, sort: true}
            ,{field: 'itemType', title: '项目类别', width: 120, sort: true}
            ,{field: 'storeId', title: '店铺ID', width: 120, sort: true}
            ,{field: 'itemStatus', title: '店铺状态', width: 120, sort: true}
            ,{field: 'itemDescription', title: '项目描述', width:200}
            ,{field: 'itemUrl', title: '图片', width: 120, templet:'<div><img onClick="showBig(this)" src="{{d.itemUrl}}" width="100%" height="60" /></div>'}
            ,{fixed: 'right', title:'操作', toolbar: '#barDemo', width:150}
        ]]
    });
    function showBig(obj) {
        //示范一个公告层
        layui.layer.open({
            type: 1
            ,title: false //不显示标题栏
            ,closeBtn: false
            ,area: '300px;'
            ,shade: 0
            ,id: 'LAY_layuipro' //设定一个id，防止重复弹出
            ,btn: ['关闭']
            ,btnAlign: 'c'
            ,moveType: 1 //拖拽模式，0或者1
            ,content: '<div><img src="'+obj.src+'" style="width: 100%"/></div>'
            ,success: function (layero) {

            }
        });
    }

    var $ = layui.jquery;

    layui.table.on('tool(test)', function(obj){
        var data = obj.data;
        //console.log(obj)
        if(obj.event === 'del'){
            layer.confirm('确定删除该行?', function(index){

                $.ajax({
                    method:'post',
                    url:'/item/delete.do?id='+data.itemId,
                    dataType:'json',
                    success:function (rs) {
                        if (rs.code==200) {
                            layui.layer.msg("删除成功");
                            layui.table.reload('item', {
                                page: {
                                    page: 1 //重新从第 1 页开始
                                }
                            });
                        }else {
                            layui.layer.msg("删除失败");
                        }
                    }
                })
                layer.close(index);
            });
        } else if(obj.event === 'edit'){
            layer.prompt({
                formType: 2
                ,value: data.email
            }, function(value, index){
                obj.update({
                    email: value
                });
                layer.close(index);
            });
        }
    });
</script>
</body>
</html>